﻿<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet">
    <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
    <style>
        body {
            font-size: 22px;
        }

        .color1 {
            color: #00adee;
            /*设置字体颜色*/
        }

        .size {
            font-size: 20px;
            /*设置字体大小*/
        }

        .line {
            border-bottom: 2px solid #00adee;
            /*设置底边框*/
            width: 100px;
            /*设置宽度*/
            margin: auto;
            /*设置外边距自动*/
        }

        .card-header {
            background: #00ceef;
            /*设置背景颜色*/
            color: white;
            /*设置字体颜色*/
        }

        .color2 {
            background: #e4e4e4;
            /*设置背景颜色*/
            color: #13082b;
            /*设置字体颜色*/
        }

        .card-body img {
            margin-bottom: 30px;
            /*设置底外边距*/
        }

        .card-body p {
            font-size: 18px;
            /*设置字体大小*/
        }

        .row h4 {
            font-weight: 900;
            /*设置字体加粗*/
        }

        .card {
            min-height: 400px;
            /*设置颜色设置最小高度*/
        }

        .card {
            transition: text-shadow 3s linear;
            /*设置过渡动画*/
        }

        .card:hover {
            box-shadow: 3px 3px 20px 0 #a4b9b4, -3px -3px 20px 0 #a4b9b4;
            /*设置阴影*/
        }
    </style>
</head>

<body>
    <div class="container">
        <h2 class="color1 text-center">网格系统进行布局卡片</h2>
        <div class="line"></div>
        <div class="row">
            <div class="col-md-4">
                <div class="card mb-4 text-center">
                    <div class="card-header">
                        <h4>网络安全训练营</h4>
                    </div>
                    <div class="card-body">
                        <img src="5.jpg">
                        <p class="card-text">从零基础快速入门网路安全,一套课程带你掌握网络安全技术。侧重实际操作。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card mb-4 text-center">
                    <div class="card-header color2">
                        <h4>网站开发训练营</h4>
                    </div>
                    <div class="card-body">
                        <img src="6.jpg">
                        <p class="card-text">从零基础快速入门网站开发,一套课程带你掌握网站开发技术。侧重实际操作。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card mb-4 text-center">
                    <div class="card-header">
                        <h4>Java开发训练营</h4>
                    </div>
                    <div class="card-body">
                        <img src="7.jpg" alt="">
                        <p class="card-text">从零基础快速入门Java开发,一套课程带你掌握Java开发技术。侧重实际操作。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>